<template>
    <div class="bground">
        <el-divider content-position="left" style="font-size: 100px"><p style="font-size: 20px">收藏菜品</p></el-divider>
        <el-table :data="tableData" style="width: 100%; --el-table-border-color: rgba(0, 191, 255, 0.8);border: rgba(0, 191, 255, 0.8); " max-height="850" class="transparent-table">
            <el-table-column fixed label="图片" style="width: 5%">
                <template #default="scope">
                    <img style="width:100%;height: 100%;border-radius: 3px" :src="tableData[scope.$index].image" />
                </template>
            </el-table-column>
            <el-table-column fixed prop="name" label="菜品姓名" style="width: 40%"/>
            <el-table-column fixed prop="price" label="价格" style="width: 20%" />
            <el-table-column fixed prop="description" label="描述" style="width: 20%" />
            <el-table-column fixed prop="shopName" label="店铺名" style="width: 20%" >
            </el-table-column>
            <el-table-column fixed prop="status" label="状态" style="width: 40%" >
                <template v-if="status === 0">
                    审核中
                </template>
                <template v-if="status === 1">
                    打烊中
                </template>
                <template v-else>
                    在售中
                </template>
            </el-table-column>
            <el-table-column fixed label="Delete" style="width: 10%">
                <template #default="scope">
                    <el-button
                            link
                            type="primary"
                            size="small"
                            @click.prevent="deleteRow(scope.row.id,scope.$index)"
                    >
                        Remove
                    </el-button>
                    <el-button
                            link
                            type="primary"
                            size="small"
                            @click.prevent="toMerchant(scope.row.merchantId,scope.$index)"
                    >
                        进店
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
    import {onMounted, ref} from 'vue'
    import {getAllDish,deleteDish} from "../api/collect";
    import {useRouter} from "vue-router"
    import { useStore } from "vuex";
    import state from "../store";

    const store = useStore();
    const router=useRouter()
    const tableData=ref([])


    onMounted(() => {
        const id=ref(store.getters.getId)
        getAllDish({id:id.value}).then((res)=>{
            for(let i=0;i<res.data.length;i++){
                tableData.value.push(res.data[i].dish)
                tableData.value[i].shopName=res.data[i].shopName;
            }
        })
    })
    const toMerchant=(merchantId,index)=>{
        //配送费未加
        //
        //
        //
        state.commit("saveMerchantId",tableData.value[index].merchantId)
        router.push({path:'/merchanthome'})
    }
    const deleteRow = (orderId,index) => {
        console.log(index)
        deleteDish({id:orderId}).then((res)=>{
            tableData.value.splice(index, 1)
        })
    }




</script>
<style>
    .bground{
        width: 100%;
        background-color:rgba(0, 191, 255, 0.4);
        border: 1px solid #ccc;
        border-radius: 10px;
        /*background-image: url('../../views/slider-pic/bizhi4.png');*/
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
</style>